<template>
  <el-row>
    <el-col class="mb-6" v-for="(item, index) in list" :key="index" :span="4" :offset="index % 5 > 0 ? 1 : 0">
      <el-card @click="lookNote" :body-style="{ padding: '0px' }">
        <img class="w-full block"
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
        <div style="padding: 14px">
          <p class="truncate ">{{ item.title }}</p>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div class="flex justify-center">
    <el-pagination @currentChange="changePage" small background layout="prev, pager, next" :total="50" class="mt-4" />
  </div>

  <el-dialog v-model="visible" :fullscreen="true">
    <NoteDetail/>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
const visible = ref(false)
interface NoteList {
  title: string
}
// let list: NoteList[] = reactive([])
const list = ref<NoteList[]>([])
const { data } = await useFetch('/api/note/list', { method: 'get', query: { page: 1, size: 10 } })
list.value = data.value!.rows
// 更改页数
const changePage = async (page: number) => {
  const { data } = await useFetch('/api/note/list', { method: 'get', query: { page, size: 10 } })
  list.value = data.value!.rows
  // list.push({title:'hhhh'})
  // list.value = [{title: 'jhhhh' + page}]
  // console.log(list)
}
// 查看笔记详情
const lookNote = () => {
  visible.value = true
  // const router = useRouter()
  // router.push('/detail')
}

</script>
<style lang="scss" scoped>
:deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #ff2e4d;
}
</style>